'use client'

import { useState, useEffect } from 'react'
import { Heart, Users, TrendingUp } from 'lucide-react'

interface FavoriteStatsProps {
  toolId: string
}

interface FavoriteStats {
  totalFavorites: number
  recentFavorites: number // 最近7天的收藏数
  favoriteUsers: Array<{
    id: string
    name: string
    avatar?: string
    favoriteDate: string
  }>
}

export function FavoriteStats({ toolId }: FavoriteStatsProps) {
  const [stats, setStats] = useState<FavoriteStats | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchStats()
  }, [toolId])

  const fetchStats = async () => {
    try {
      setLoading(true)
      const response = await fetch(`/api/tools/${toolId}/favorites/stats`)
      const result = await response.json()

      if (response.ok) {
        setStats(result.data)
      }
    } catch (error) {
      console.error('获取收藏统计失败:', error)
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return (
      <div className="bg-gray-50 rounded-lg p-4">
        <div className="animate-pulse space-y-3">
          <div className="h-4 bg-gray-200 rounded w-1/3"></div>
          <div className="flex space-x-2">
            {[1, 2, 3].map(i => (
              <div key={i} className="h-8 w-8 bg-gray-200 rounded-full"></div>
            ))}
          </div>
        </div>
      </div>
    )
  }

  if (!stats || stats.totalFavorites === 0) {
    return (
      <div className="bg-gray-50 rounded-lg p-4 text-center">
        <Heart className="h-8 w-8 text-gray-400 mx-auto mb-2" />
        <p className="text-sm text-gray-500">暂无收藏</p>
      </div>
    )
  }

  return (
    <div className="bg-gray-50 rounded-lg p-4">
      <div className="flex items-center justify-between mb-3">
        <h4 className="text-sm font-medium text-gray-900">收藏统计</h4>
        <div className="flex items-center space-x-1 text-xs text-gray-500">
          <Heart className="h-3 w-3 text-red-500" />
          <span>{stats.totalFavorites}</span>
        </div>
      </div>

      {/* 统计数据 */}
      <div className="grid grid-cols-2 gap-3 mb-4">
        <div className="text-center">
          <div className="text-lg font-semibold text-gray-900">
            {stats.totalFavorites}
          </div>
          <div className="text-xs text-gray-500">总收藏数</div>
        </div>
        
        <div className="text-center">
          <div className="text-lg font-semibold text-green-600">
            +{stats.recentFavorites}
          </div>
          <div className="text-xs text-gray-500">最近7天</div>
        </div>
      </div>

      {/* 最近收藏的用户 */}
      {stats.favoriteUsers.length > 0 && (
        <div>
          <div className="text-xs text-gray-500 mb-2">最近收藏</div>
          <div className="flex -space-x-1">
            {stats.favoriteUsers.slice(0, 5).map((user, index) => (
              <div
                key={user.id}
                className="relative"
                style={{ zIndex: 5 - index }}
                title={`${user.name} - ${new Date(user.favoriteDate).toLocaleDateString()}`}
              >
                {user.avatar ? (
                  <img
                    src={user.avatar}
                    alt={user.name}
                    className="h-6 w-6 rounded-full border-2 border-white bg-gray-100"
                  />
                ) : (
                  <div className="h-6 w-6 rounded-full border-2 border-white bg-blue-500 flex items-center justify-center">
                    <span className="text-xs font-medium text-white">
                      {user.name.charAt(0).toUpperCase()}
                    </span>
                  </div>
                )}
              </div>
            ))}
            
            {stats.favoriteUsers.length > 5 && (
              <div className="h-6 w-6 rounded-full border-2 border-white bg-gray-200 flex items-center justify-center">
                <span className="text-xs font-medium text-gray-600">
                  +{stats.favoriteUsers.length - 5}
                </span>
              </div>
            )}
          </div>
        </div>
      )}

      {/* 趋势指示器 */}
      {stats.recentFavorites > 0 && (
        <div className="mt-3 pt-3 border-t border-gray-200">
          <div className="flex items-center space-x-1 text-xs text-green-600">
            <TrendingUp className="h-3 w-3" />
            <span>收藏趋势上升</span>
          </div>
        </div>
      )}
    </div>
  )
}
